<template>
	<view>
		<uni-nav-bar left-icon="back" @click-left="back" @click-right="save()" right-text="保存" title="家庭成员信息"></uni-nav-bar>
		<view class="list">
			<view class="list-item">
				<text>姓名</text>
				<view class="input"><input class="inputText" type="text" data-name="nickname" @input="input" :value="familyData.nickname"  placeholder="请填写姓名" placeholder-class="placeholder" /></view>
			</view>
			<view class="list-item">
				<text>身份证号码</text>
				<view class="input"><input class="inputText" type="text" data-name="card_no" @input="input" :value="familyData.card_no"  placeholder="请填写身份证号码" placeholder-class="placeholder" /></view>
			</view>
			<view class="list-item">
				<text>关系</text>
				<view class="input"><input class="inputText" type="text" data-name="relation" @input="input" :value="familyData.relation"  placeholder="请填写您们的关系" placeholder-class="placeholder" /></view>
			</view>
			<view class="list-item">
				<text>联系电话</text>
				<view class="input"><input class="inputText" type="text" data-name="phone" @input="input" :value="familyData.phone"  placeholder="请填写联系电话" placeholder-class="placeholder" /></view>
			</view>
		</view>
		<view class="block"></view>
		<view class="list">
			<view class="list-item">
				<text>姓名</text>
				<view class="input"><input class="inputText" type="text" data-name="nickname_two" @input="input" :value="familyData.nickname_two"  placeholder="请填写姓名" placeholder-class="placeholder" /></view>
			</view>
			<view class="list-item">
				<text>身份证号码</text>
				<view class="input"><input class="inputText" type="text" data-name="card_no_two" @input="input" :value="familyData.card_no_two"  placeholder="请填写身份证号码" placeholder-class="placeholder" /></view>
			</view>
			<view class="list-item">
				<text>关系</text>
				<view class="input"><input class="inputText" type="text" data-name="relation_two" @input="input" :value="familyData.relation_two"  placeholder="请填写您们的关系" placeholder-class="placeholder" /></view>
			</view>
			<view class="list-item">
				<text>联系电话</text>
				<view class="input"><input class="inputText" type="text" data-name="phone_two" @input="input" :value="familyData.phone_two"  placeholder="请填写联系电话" placeholder-class="placeholder" /></view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: { uniNavBar, uniIcons },
	data() {
		return {
			familyData: {
				nickname: '',
				card_no: '',
				relation: '',
				phone: '',
				nickname_two: '',
				card_no_two: '',
				relation_two: '',
				phone_two: ''
			}
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		async getData() {
			let res = await this.$request.get('/setting/setFamily', {});
			let data = res.data.data.list;
			if (data) {
				let { nickname, card_no, relation, phone, nickname_two, card_no_two, relation_two, phone_two } = data;
				this.familyData = {
					nickname,
					card_no,
					relation,
					phone,
					nickname_two,
					card_no_two,
					relation_two,
					phone_two
				};
			}
		},
		input(e) {
			let name = e.target.dataset.name;
			let value = e.detail.value;
			this.familyData[name] = value;
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		async save() {
			let familyData = this.familyData;
			for (let key in familyData) {
				if (!familyData[key] && key != 'is_default') {
					uni.showToast({
						title: '请将表单填写完整',
						duration: 2000
					});
					console.log(key);
					return false;
				}
			}
			let res = await this.$request.post('/setting/setFamily', {
				data: {
					...familyData
				}
			});
			if (res.data.code == 10000) {
				uni.showToast({
					title: '保存成功',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 2000);
			} else {
				uni.showToast({
					title: '保存失败',
					duration: 2000
				});
			}
		}
	}
};
</script>

<style lang="scss">
.list {
	width: 100%;
	box-sizing: border-box;
	padding-left: 30upx;
	.list-item {
		width: 100%;
		height: 110upx;
		border-bottom: 2upx solid #e7e7e7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-right: 20upx;
		font-size: $uni-font-size-base;
		color: #333333;
		.input {
			width: 500upx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.inputText {
				color: #333333;
				font-size: $uni-font-size-base;
				width: 100%;
				text-align: right;
				box-sizing: border-box;
			}
		}
	}
}
.placeholder {
	color: #d7d7d7;
}
.block {
	width: 100%;
	height: 20upx;
	background-color: #f5f6f7;
}
</style>
